<template>
  <div class="tabBox">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in topTags"
        :key="index"
        :label="item.title"
        :name="item.id"
      >
        <div class="center">
          <subTag :list="subList" @click-tag="clickTag"></subTag>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-select v-model="tag" placeholder="请选择">
                <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input v-model="title" placeholder="请输入文章标题"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="search" :loading="searchLoading">搜索</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-loading="listLoading">
            <el-col
              :span="6"
              v-for="item in dataList"
              :key="item.id"
            >
              <a :href="item.link_url" target="_blank">
                <el-card class="cardItem" :body-style="{ padding: '1px' }" shadow="hover">
                  <el-image style="width: 100%; height: 150px" :src="item.cover_link_url" fit="cover">
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                  <div class="cardTitle">
                    <div class="titleBox">{{ item.title }}</div>
                    <div class="timeBox">{{ item.upload_date }}</div>
                  </div>
                </el-card>
              </a>
            </el-col>
          </el-row>
          <el-pagination
            style="float: right"
            :hide-on-single-page="true"
            background
            layout="prev, pager, next"
            :page-size="12"
            :current-page="currentPage"
            @current-change="pageChange"
            :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getResourceList, getTagList } from '@/common/api.js'
import subTag from './components/subTag'
export default {
  name: 'national',
  components: {
    subTag
  },
  data () {
    return {
      searchLoading: false,
      listLoading: false,
      activeName: '4',
      subList: [],
      topTags: [],
      tagList: [
        { id: 0, name: '请选择', value: '' },
        { id: 1, name: '校园欺凌', value: '校园欺凌' },
        { id: 2, name: '网络成瘾', value: '网络成瘾' },
        { id: 3, name: '抑郁', value: '抑郁' },
        { id: 4, name: '焦虑', value: '焦虑' },
        { id: 5, name: '学业倦怠', value: '学业倦怠' },
        { id: 6, name: '小学1-2年级', value: '小学1-2年级' },
        { id: 7, name: '小学3-4年级', value: '小学3-4年级' },
        { id: 8, name: '小学5-6年级', value: '小学5-6年级' },
        { id: 9, name: '初中', value: '初中' },
        { id: 10, name: '高中', value: '高中' }
      ],
      dataList: [],
      categoryId: '4',
      tag: '',
      title: '',
      total: 0,
      currentPage: 1
    }
  },
  created () {
    this.init()
  },
  watch: {
    '$route' (to, from) {
      this.init()
    }
  },
  methods: {
    init () {
      let type = this.$route.params.type
      if (type === '1') {
        this.categoryId = '4'
        this.activeName = '4'
      } else if (type === '2') {
        this.categoryId = '7'
        this.activeName = '7'
      } else if (type === '3') {
        this.categoryId = '9'
        this.activeName = '9'
      } else {
        type = '1'
        this.categoryId = '4'
        this.activeName = '4'
      }
      this.getTagList(type)
      this.getResourceList()
    },
    pageChange (page) {
      this.currentPage = page
      this.getResourceList()
    },
    clickTag (id) {
      if (id) {
        this.categoryId = id
      } else {
        this.categoryId = this.activeName
      }
      this.currentPage = 1
      this.getResourceList()
    },
    search () {
      this.currentPage = 1
      this.searchLoading = true
      this.getResourceList()
    },
    getTagList (categoryId) {
      getTagList({category_id: categoryId}).then(r => {
        this.topTags = r.data.sub_list
        this.subList = this.getSubList(this.activeName)
      }).catch(e => {
        console.log(e)
      })
    },
    getResourceList () {
      this.listLoading = true
      getResourceList({
        category_id: this.categoryId,
        tag: this.tag,
        title: this.title,
        page: this.currentPage,
        limit: 12
      }).then(r => {
        if (r.data) {
          this.dataList = r.data.list
          this.total = r.data.totalCount
        } else {
          this.dataList = []
          this.total = 0
        }
        this.listLoading = false
        this.searchLoading = false
      }).catch(e => {
        console.log(e)
        this.listLoading = false
        this.searchLoading = false
      })
    },
    getSubList (id) {
      const subList = this.topTags.filter(item => {
        return item.id === id
      })
      if (subList.length) {
        return subList[0].sub_list
      }
      return []
    },
    handleClick (tab) {
      this.activeName = tab.name
      this.categoryId = tab.name
      this.currentPage = 1
      this.tag = ''
      this.title = ''
      this.getResourceList()
      this.subList = this.getSubList(this.activeName)
    }
  }
}
</script>

<style lang='css' scoped>
.cardItem {
  width: 100%;
  height: 150px;
  padding: 10px;
  margin-top: 10px;
  margin-right: 10px;
}
.cardTitle {
  height: 50px;
  position: relative;
  top: -50px;
  background: rgba(0, 0, 0, 0.4);
}
.titleBox {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  padding-left: 10px;
}
.timeBox {
  font-size: 12px;
  color: #fff;
  padding-left: 10px;
}
.cardItem > img {
  width: 100%;
}
</style>
